<template>
  <!--订单 工单-->
  <!--<div class="col-md-12">
    <div class=" task-row">-->
      <!--工单任务-->
      <div class="col-md-6 complainCom">
        <div class="module task-module complain-task">
          <section class="module-header">
            <h1>工单任务</h1>
            <a onClick="workOrderTaskAll()"  target="_blank">查看全部&gt;</a>
          </section>
          <div class="module-content task-error">
            <div class="row complain-task-row">
              <div class="col-md-12">
                <div class="data">
                  <span class="data_num">{{complain.data.totalCount}}</span>
                  <p class="data-title">未处理工单</p>
                </div>
              </div>
            </div>
            <div class="data_parent-border complaintCls" v-show="complainFlag">
              <div class="data_border_box data_border_box_task">
                <Table :content="self" :columns="formTitle" :data="complaintList" :show-header="false"></Table>
                </div>
              </div>
            <div class="complain-null" v-show="!complainFlag&&orderFlag">
              <img src="/static/resources/img/complainNull.png">
            </div>
          </div>
        </div>
      </div>
</template>

<script>
    export default {
        name: "complain-com",
        data(){
            return{
                self:this,
                totalCount:0,
                formTitle:[
                    {key:"voucherNumber",width:90,
                        render:function (h,params) {
                            return h('p' ,{
                                domProps: {
                                    title: params.row.voucherNumber
                                },
                                style: {
                                    maxWidth: '90px',
                                    textOverflow: "ellipsis",
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    color: '#3a8be9'
                                }
                            },params.row.voucherNumber)
                        }
                    },
                    { key:"createTime",width:130,
                        render: function (h, params) {
                            let time = new Date(Number(this.row.createTime)).format('yyyy-MM-dd hh:mm');
                            return("div",[ h('img' ,{
                                domProps: {
                                    align: 'center',
                                    src: require('../../assets/clock.png'),
                                },
                                style: {
                                    width:'15px',
                                    marginTop:"-3px"
                                }
                            }),h("div",{style:{display:"inline-block"}},time)])
                        }
                    },
                    {key:'callMan',ellipsis:true},
                    {
                        key: "typeBusiness",width:35,
                        render:(h,params) =>{
                            return h("div",params.row.typeBusiness == 'EXPRESS'? '快递':'零担');
                       }
                    },
                    {
                        key: "compLevel",width:35,
                        render:(h,params) =>{
                            let compLevel;
                            switch (params.row.compLevel) {
                                case ("LEVEL_1"): compLevel = "一级"; break;
                                case ("LEVEL_2"): compLevel = "二级"; break;
                                case ("LEVEL_3"): compLevel = "三级"; break;
                                case ("LEVEL_4"): compLevel = "四级"; break;
                                case ("LEVEL_5"): compLevel = "五级"; break;
                            }
                            return h('div',compLevel);
                        }
                    },
                    {
                        key: "priorityLevel",width:50,
                        render:(h,params) =>{
                            if(params.row.priorityLevel == 'NORMAL'){
                                return h("label", {
                                        style: {
                                            cursor:"default",
                                            backgroundColor: "#b2b2b2",
                                            width: '32px',
                                            height: '18px',
                                            fontSize: '11px',
                                            padding: '0.5px 5px',
                                            borderRadius: '3px',
                                            color:'#fff'
                                        }
                                    }
                                    ,'普通');
                            }else{
                                return h("label", {
                                        style: {
                                            cursor:"default",
                                            backgroundColor: "#f39c12",
                                            width: '32px',
                                            height: '18px',
                                            fontSize: '11px',
                                            padding: '0.5px 5px',
                                            borderRadius: '3px',
                                            color:'#fff'
                                        }
                                    }
                                    ,'优先');
                            }

                        }
                    }
                ],
                formData:[
                    /*{
                        voucherNumber:'132415151',
                        createTime:'1520894031000',
                        callMan:'未知',
                        typeBusiness:'BREAKBULK',
                        compLevel:'LEVEL_1',
                        priorityLevel:'NORMAL'
                    },{
                        voucherNumber:'132415151',
                        createTime:'1520894031000',
                        callMan:'未知',
                        typeBusiness:'EXPRESS',
                        compLevel:'LEVEL_3',
                        priorityLevel:'NORMAL'
                    },{
                        voucherNumber:'132415151',
                        createTime:'1520894031000',
                        callMan:'未知',
                        typeBusiness:'EXPRESS',
                        compLevel:'LEVEL_2',
                        priorityLevel:'HIGH'
                    },{
                        voucherNumber:'132415151',
                        createTime:'1520894031000',
                        callMan:'未知',
                        typeBusiness:'BREAKBULK',
                        compLevel:'LEVEL_4',
                        priorityLevel:'NORMAL'
                    },{
                        voucherNumber:'132415151',
                        createTime:'1520894031000',
                        callMan:'未知',
                        typeBusiness:'EXPRESS',
                        compLevel:'LEVEL_3',
                        priorityLevel:'HIGH'
                    },{
                        voucherNumber:'132415151',
                        createTime:'1520894031000',
                        callMan:'未知',
                        typeBusiness:'EXPRESS',
                        compLevel:'LEVEL_2',
                        priorityLevel:'NORMAL'
                    }*/
                ],
                complainData:false,
                complainNull:false
            }
        },
        props: ['complain','orderFlag','complainFlag'],
        computed:{
          complaintList(){
            let temp = this.complain.data.complaintList;
            if(!(temp.__proto__.constructor===Array)){
              temp = [];
            }
            return temp;
          }
        }
    }
</script>

<style>
  .col-md-6.complainCom{
    padding-right: 0;
    padding-left: 10px;
  }
  .complainCom .ivu-table table{
    width:100%!important;
  }
  .complainCom .ivu-table-cell {
    padding-left: 0px!important;
    padding-right: 10px;
  }
  .complainCom .ivu-table-wrapper{
    border: 0px !important;
  }
  .complainCom .ivu-table tr:nth-child(2n+1){
    background-color: #F5F5F5;
  }
  .complainCom .ivu-table tr:hover{
    background-color: #c8e4fa;;
  }
  .complainCom .ivu-table td{
    height: 32px;
    cursor: default;
    border-bottom: 0px;
    background-color: transparent;
  }
  .complainCom .ivu-table-body{
    overflow: hidden;
  }
  .complainCom .ivu-table:before,
  .complainCom .ivu-table:after{
    background-color: transparent;
  }
  .complainCom .data_border_box_task{
    overflow-y:auto;
    height: 169px;
    border-radius: 5px;
  }
  .complainCom .data-table{
    margin-bottom: 0px;
    display: table;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    color: #7f7f7f;
  }
  .complainCom .data-table tr td{
    height: 36px;
  }
  .complain-task .complain-null{
    height: 169px;
    width:100%;
    text-align: center;
  }
  .complain-task .complain-null img{
    margin: 18px auto;
  }
  .complainCom .task-module{
    padding: 0;
    min-width: 405px;
    width: 100%;
    height: auto;
  }
  .complainCom .module-header{
    height: 35px;
    padding-left: 20px;
    padding-right: 20px
  }
  .complain-task .data{
    box-sizing: border-box;
    text-align: center;
  }
  .complainCom .module-content .data{
    position: relative;
    margin-bottom: 25px;
  }
  .complainCom .data-title{
    font-size: 13px;
    color: #373c64;
  }
  .complainCom .module-content .data p a{
    color: #d00101;
  }
  .complainCom .module-content{
    height:auto;
    padding: 20px 20px 10px 20px;
  }
  .complainCom .data_num {
    font-family: 微软雅黑;
    color: #d00101;
    font-size: 34px;
  }


</style>
